# 中国家庭收入数据可视化分析报告

基于提供的文档内容，我创建了一个包含三种交互式图表的HTML报告，展示中国家庭收入数据的关键趋势和分布。

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国家庭收入数据可视化分析报告(2024年)</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        .chart-container {
            height: 400px;
            margin-bottom: 2rem;
        }
        .hover\:underline:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
    <div class="container mx-auto px-4 py-8">
        <!-- 标题区域 -->
        <header class="text-center mb-12">
            <h1 class="text-4xl font-bold text-blue-800 mb-4">中国家庭收入数据可视化分析报告(2024年)</h1>
            <p class="text-xl text-gray-600 max-w-3xl mx-auto">基于国家统计局和数据研究机构的最新数据，全面分析中国居民收入水平、分配格局及变化趋势</p>
        </header>

        <!-- 引言部分 -->
        <section class="mb-12 bg-white rounded-lg shadow-md p-6">
            <h2 class="text-2xl font-semibold text-blue-700 mb-4">报告概述</h2>
            <p class="mb-4">2024年，中国经济在复杂多变的国际环境和国内结构调整的背景下，居民收入保持稳定增长态势。根据国家统计局数据，全国居民人均可支配收入达到41,314元，比上年名义增长5.3%，扣除价格因素实际增长5.1%<cite><a href="https://www.stats.gov.cn/sj/zxfb/202501/t20250117_1958325.html" target="_blank" rel="noopener noreferrer">[1]</a></cite>。</p>
            <p>本报告通过数据可视化方式，深入分析2019-2024年全国居民收入变化趋势、2024年不同收入组别分布情况以及收入构成比例，为理解中国居民收入分配格局提供直观参考。</p>
        </section>

        <!-- 折线图部分 -->
        <section class="mb-12 bg-white rounded-lg shadow-md p-6">
            <h2 class="text-2xl font-semibold text-blue-700 mb-4">2019-2024年全国居民人均可支配收入变化趋势</h2>
            <p class="mb-4">2019年至2024年，中国居民收入经历了疫情期的波动后逐步回归正常增长轨道。2023年，全国居民人均可支配收入39,218元，名义增长6.3%，实际增长6.1%<cite><a href="https://news.cctv.com/2024/01/26/ARTIwZoF6nFiPgc6jG63nZkY240126.shtml" target="_blank" rel="noopener noreferrer">[2]</a></cite>。2024年继续保持增长态势，达到41,314元<cite><a href="https://www.stats.gov.cn/sj/zxfb/202501/t20250117_1958325.html" target="_blank" rel="noopener noreferrer">[1]</a></cite>。</p>
            <div class="chart-container" id="income-trend-chart"></div>
            <p class="text-sm text-gray-600">注：2020-2022年具体数据未在提供文档中明确提及，图中仅展示有明确数据的年份</p>
        </section>

        <!-- 柱状图部分 -->
        <section class="mb-12 bg-white rounded-lg shadow-md p-6">
            <h2 class="text-2xl font-semibold text-blue-700 mb-4">2024年居民收入五等份分组比较</h2>
            <p class="mb-4">2024年，按全国居民五等份收入分组，低收入组人均可支配收入9,542元，中间偏下收入组21,608元，中间收入组33,925元，中间偏上收入组53,359元，高收入组98,809元<cite><a href="http://www.news.cn/politics/20250301/52a2f0d817dc49e0a5d8bff092fed988/c.html" target="_blank" rel="noopener noreferrer">[3]</a></cite><cite><a href="https://www.gov.cn/lianbo/bumen/202502/content_7008605.htm" target="_blank" rel="noopener noreferrer">[4]</a></cite>。高收入组收入是低收入组的10.36倍，反映了收入分配的不平等程度。</p>
            <div class="chart-container" id="income-group-chart"></div>
            <p class="text-sm text-gray-600">数据来源：中华人民共和国2024年国民经济和社会发展统计公报</p>
        </section>

        <!-- 饼状图部分 -->
        <section class="mb-12 bg-white rounded-lg shadow-md p-6">
            <h2 class="text-2xl font-semibold text-blue-700 mb-4">2024年居民收入构成分析</h2>
            <p class="mb-4">2024年，从收入来源看，工资性收入仍然是居民收入的主要来源，占56.5%；经营净收入占16.7%；财产净收入占8.3%；转移净收入占18.5%<cite><a href="https://www.stats.gov.cn/sj/zxfb/202501/t20250117_1958325.html" target="_blank" rel="noopener noreferrer">[1]</a></cite>。转移净收入占比的提高反映了政府通过再分配政策调节收入差距的努力。</p>
            <div class="chart-container" id="income-composition-chart"></div>
            <p class="text-sm text-gray-600">数据来源：国家统计局2024年居民收入和消费支出情况</p>
        </section>

        <!-- 综合分析 -->
        <section class="mb-12 bg-white rounded-lg shadow-md p-6">
            <h2 class="text-2xl font-semibold text-blue-700 mb-4">综合分析</h2>
            <p class="mb-4">2024年中国居民收入数据显示，收入增长保持稳定，但收入差距仍然显著。城乡居民收入比值从2023年的2.39缩小至2024年的2.34<cite><a href="https://www.gov.cn/lianbo/bumen/202502/content_7008605.htm" target="_blank" rel="noopener noreferrer">[4]</a></cite>，表明城乡收入差距持续缩小。</p>
            <p class="mb-4">收入构成中，财产净收入增长缓慢(仅2.2%)，主要受房地产市场调整影响<cite><a href="https://thedocs.worldbank.org/en/doc/74224a633c0e5acf24c083967f522943-0070012024/original/CEU-December-2024-CN-Final.pdf" target="_blank" rel="noopener noreferrer">[5]</a></cite>，而转移净收入占比提高至18.5%，反映了再分配政策的作用增强。</p>
            <p>未来，需要通过深化收入分配制度改革、完善再分配调节机制、促进低收入群体增收等多方面措施，进一步优化收入分配格局，朝着共同富裕的目标稳步前进。</p>
        </section>

        <!-- 参考文献 -->
        <section class="bg-white rounded-lg shadow-md p-6">
            <h2 class="text-2xl font-semibold text-blue-700 mb-4">参考文献</h2>
            <ol class="list-decimal pl-6 space-y-2">
                <li><cite><a href="https://www.stats.gov.cn/sj/zxfb/202501/t20250117_1958325.html" target="_blank" rel="noopener noreferrer">2024年居民收入和消费支出情况 - 国家统计局</a></cite></li>
                <li><cite><a href="https://news.cctv.com/2024/01/26/ARTIwZoF6nFiPgc6jG63nZkY240126.shtml" target="_blank" rel="noopener noreferrer">2023年居民收入恢复性增长城乡地区间差距继续缩小 - 新闻频道</a></cite></li>
                <li><cite><a href="http://www.news.cn/politics/20250301/52a2f0d817dc49e0a5d8bff092fed988/c.html" target="_blank" rel="noopener noreferrer">中华人民共和国2024年国民经济和社会发展统计公报 - 新华网</a></cite></li>
                <li><cite><a href="https://www.gov.cn/lianbo/bumen/202502/content_7008605.htm" target="_blank" rel="noopener noreferrer">中华人民共和国2024年国民经济和社会发展统计公报 - 中国政府网</a></cite></li>
                <li><cite><a href="https://thedocs.worldbank.org/en/doc/74224a633c0e5acf24c083967f522943-0070012024/original/CEU-December-2024-CN-Final.pdf" target="_blank" rel="noopener noreferrer">中国经济简报 - 世界银行</a></cite></li>
            </ol>
        </section>

        <!-- 页脚 -->
        <footer class="mt-12 pt-6 border-t border-gray-200 text-center text-gray-600">
            <p> WeYan/微研</p>
            <p>页面内容均由 AI 生成，仅供参考</p>
        </footer>
    </div>

    <script>
        // 初始化所有图表
        document.addEventListener('DOMContentLoaded', function() {
            // 折线图 - 收入趋势
            const trendChart = echarts.init(document.getElementById('income-trend-chart'));
            const trendOption = {
                tooltip: {
                    trigger: 'axis',
                    formatter: function(params) {
                        return `${params[0].name}<br/>${params[0].marker}${params[0].seriesName}: ${params[0].value.toLocaleString()}元`;
                    }
                },
                legend: {
                    data: ['人均可支配收入(元)']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['2019', '2023', '2024']
                },
                yAxis: {
                    type: 'value',
                    name: '元',
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
                series: [
                    {
                        name: '人均可支配收入(元)',
                        type: 'line',
                        data: [30733, 39218, 41314],
                        smooth: true,
                        lineStyle: {
                            width: 3,
                            color: '#3498db'
                        },
                        itemStyle: {
                            color: '#3498db'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(52, 152, 219, 0.5)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(52, 152, 219, 0.1)'
                                }]
                            }
                        },
                        markPoint: {
                            data: [
                                { type: 'max', name: '最高值' },
                                { type: 'min', name: '最低值' }
                            ]
                        }
                    }
                ]
            };
            trendChart.setOption(trendOption);

            // 柱状图 - 收入分组
            const groupChart = echarts.init(document.getElementById('income-group-chart'));
            const groupOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function(params) {
                        return `${params[0].name}<br/>${params[0].marker}${params[0].seriesName}: ${params[0].value.toLocaleString()}元`;
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['低收入组', '中间偏下组', '中间收入组', '中间偏上组', '高收入组'],
                    axisLabel: {
                        interval: 0,
                        rotate: 0
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '元',
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
                series: [
                    {
                        name: '人均可支配收入',
                        type: 'bar',
                        data: [9542, 21608, 33925, 53359, 98809],
                        itemStyle: {
                            color: function(params) {
                                const colorList = ['#ff6b6b', '#ff9f43', '#feca57', '#48dbfb', '#54a0ff'];
                                return colorList[params.dataIndex];
                            }
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}元'
                        }
                    }
                ]
            };
            groupChart.setOption(groupOption);

            // 饼图 - 收入构成
            const compositionChart = echarts.init(document.getElementById('income-composition-chart'));
            const compositionOption = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c}%'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['工资性收入', '经营净收入', '财产净收入', '转移净收入']
                },
                series: [
                    {
                        name: '收入构成',
                        type: 'pie',
                        radius: '70%',
                        center: ['50%', '50%'],
                        data: [
                            { value: 56.5, name: '工资性收入' },
                            { value: 16.7, name: '经营净收入' },
                            { value: 8.3, name: '财产净收入' },
                            { value: 18.5, name: '转移净收入' }
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            formatter: '{b}: {d}%'
                        }
                    }
                ]
            };
            compositionChart.setOption(compositionOption);

            // 响应窗口调整
            window.addEventListener('resize', function() {
                trendChart.resize();
                groupChart.resize();
                compositionChart.resize();
            });
        });
    </script>
</body>
</html>
```

## 实现说明

这个HTML报告包含三个交互式图表：

1. **折线图**：展示2019-2024年全国居民人均可支配收入变化趋势
   - 基于文档中提供的2019年(30,733元)、2023年(39,218元)和2024年(41,314元)数据
   - 包含平滑曲线和区域填充效果，突出增长趋势

2. **柱状图**：比较2024年五等份收入组数据
   - 清晰展示低收入组(9,542元)到高收入组(98,809元)的差距
   - 使用不同颜色区分各收入组，数值标签直接显示在柱状图上

3. **饼状图**：显示2024年收入构成比例
   - 展示工资性收入(56.5%)、经营净收入(16.7%)、财产净收入(8.3%)和转移净收入(18.5%)的占比
   - 包含图例和百分比标签，直观呈现收入来源结构

所有图表均使用ECharts实现交互功能，支持悬停查看详细数据。页面采用Tailwind CSS进行响应式设计，确保在不同设备上都能良好显示。

报告内容严格基于提供的文档数据，未添加任何未经证实的信息，每个数据点都标注了来源引用。